import styled from 'styled-components';

export const PlayListWrapper = styled.div`
    position: relative;
    width: 553px;
    padding: 2px;

    .play-item {
        padding: 0 8px 0 25px;
        display: flex;
        position: relative;
        justify-content: space-between;
        align-items: center;
        height: 28px;
        line-height: 28px;
        color: #ccc;
        cursor: pointer;
        :hover {
            background-color: rgba(0, 0, 0, 0.5);
            .left {
                .left_2 {
                    .icon_box {
                        opacity: 1;
                    }
                }
            }
        }

        &.active {
            color: #fff;
            background-color: #000;

            ::before {
                content: "";
                position: absolute;
                left: 8px;
                width: 10px;
                height: 13px;
                background: url(${require("@/assets/img/playlist_sprite.png")}) -182px 0;
            }
        }

        .left {
            flex: 1;
            display: flex;
            justify-content: space-between;
            align-items: center;
            .left_2 {
                display: flex;
                justify-content: center;
                align-items: center;
                .icon_box {
                    width: 26px;
                    height: 26px;
                    display: flex;
                    justify-content: center;
                    align-items: center;
                    margin-right: 18px;
                    opacity: 0;
                    
                    i {
                        width: 16px;
                        height: 18px;
                        background: url(${require("@/assets/img/sprite_table.png")}) 0 154px;
                    }

                }
            }
        }

        .right {
            display: flex;
            align-items: center;

            .singer {
                width: 80px;
            }

            .duration {
                width: 45px;
            }

            .link {
                margin-left: 20px;
                width: 14px;
                height: 16px;
                background-position: -100px 0;
            }
        }
    }
`